import React, { Component } from 'react'
import store from '../store/index.js'

export default class newRedux extends Component {
  constructor() {
    super()
    this.state = {
      age: 0,
      name: '',
      num: 0
    }
  }
  // action creator 用来制造action的一个对象，里面有很多方法，调用方法会返回一个action对象
  actions = {

  }
  componentDidMount() {
    // console.log(store.getState());
    this.setState(store.getState())
    this.un = store.subscribe(()=>{
      this.setState(store.getState())
    })
  }
  componentWillUnmount() {
    // 离开页面时，取消监听
    this.un()
  }
  numAdd() {
    // action是一个 js对象，一定会包含type属性
    let action = {type: 'numAdd'}
    store.dispatch(action);
    // vuex:  this.$store.dispatch('numAdd')
  }
  render() {
    return (
      <div>
        <p>{this.state.age}</p>
        <button onClick={()=>this.numAdd()}>numAdd</button>
        <p>num: {this.state.num}</p>
      </div>
    )
  }
}
